<script setup>

import { reactive, ref } from 'vue'
// 消息弹出框
import { ElMessage, ElMessageBox } from 'element-plus'

const formRef = ref('')

// 新增修改控制
const formState = ref(true)

// 表单数据
const formData = ref({
    account: '',
    password: '',
    repPassword: ''
})

// 账户列表
const accountData = ref([{
    id: 1001,
    account: 'chz',
    password: '123456',
    repPassword: '123456'
},{
    id: 1002,
    account: 'lmk',
    password: '1234567',
    repPassword: '1234567'
}])

// 校验规则
const rules = {
    account: [{
      required: true,
      message: '请输入账户名',
      trigger: 'blur',
    },{
      max: 10,
      message: '账户名不能超过10位',
      trigger: 'blur',
    }],
    password: [{
        required: true,
        message: '请输入密码',
        trigger: 'blur'
    },{
        pattern: /^\S{6,20}$/,
        message: '密码长度为6~20位非空字符',
        trigger: 'blur'
    }],
    repPassword: [
        {
            required: true,
            message: '两次密码不一致',
            trigger: 'blur'
        },
        {
            validator: (rule, value, callback) => {
                if (formData.value.password !== value) {
                    callback(new Error('两次密码不一致'))
                } else {
                    callback()
                }
                
            },
            trigger: 'blur'
        }
    ]  
}

// 重置表单/新增用户
const changeForm = () => {
    if (!formState.value) {
        formState.value = true
    }
    formData.value = {
        account: '',
        password: '',
        repPassword: ''
    }
}

// 新增按钮
const submitForm = async () => {
    await formRef.value.validate()
    accountData.value.unshift({
        id: +new Date(),
        account: formData.value.account,
        password: formData.value.password,
        repPassword: formData.value.repPassword
    })
    formRef.value.resetFields()
}

// 修改
const changeUser = (index) => {
    formState.value = false
    formData.value = accountData.value[index]
}

// 删除用户
const deleteUser = (index) => {
  ElMessageBox.confirm(
    '确认删除用户吗?',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        const accountDataIndex = accountData.value.findIndex(x => x.id === index)
        if (formData.value.account === accountData.value[accountDataIndex].account) {
            formData.value = {
                account: '',
                password: '',
                repPassword: ''
            }
        }
        accountData.value.splice(accountDataIndex ,1)
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
    })
}

</script>

<template>
    <div class="content">
        <!-- 表单 -->
    <div class="form">
        <h3>{{formState? '新增账户' : '修改账户'}}</h3>
            <!-- 新增 -->
            <el-form
            ref="formRef"
            style="max-width: 600px"
            :model="formData"
            status-icon
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            v-if="formState"
        >
            <el-form-item label="账户名" prop="account">
            <el-input
                v-model="formData.account"
                type="text"
                autocomplete="off"
            />
            </el-form-item>
            <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="formData.password" />
            </el-form-item>
            <el-form-item label="确认密码" prop="repPassword">
            <el-input type="password" v-model="formData.repPassword" />
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="submitForm()">
                新增
            </el-button>
            <el-button @click="changeForm">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 修改 -->
        <el-form
            ref="formRef"
            style="max-width: 600px"
            :model="formData"
            status-icon
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            v-else
        >
            <el-form-item label="账户名" prop="account">
            <el-input
                disabled
                v-model="formData.account"
                type="text"
                autocomplete="off"
            />
            </el-form-item>
            <el-form-item label="修改密码" prop="password">
            <el-input type="password" v-model="formData.password" />
            </el-form-item>
            <el-form-item label="确认密码" prop="repPassword">
            <el-input type="password" v-model="formData.repPassword" />
            </el-form-item>
            <el-form-item>
            <el-button type="primary" @click="submitForm()">
                修改
            </el-button>
            <el-button @click="changeForm">{{ formState? '重置' : '新增账户' }}</el-button>
            </el-form-item>
        </el-form>
    </div>
  <!-- 账户列表 -->
    <div class="list">
        <h3>账户列表</h3>
        <div class="box">
            <div class="row" v-for="(item,index) in accountData" :key="item.id">
                <p>{{ item.account }}</p>
                <span>
                    <el-button type="primary" @click="changeUser(index)">修改</el-button>
                    <el-button type="danger" @click="deleteUser(item.id)">删除</el-button>
                </span>
            </div>
        </div>
    </div>
    </div>
</template>

<style scoped>
.content {
    display: flex;
    flex-wrap: wrap;
}
.form {
    width: 60%;
}
.box {
    padding: 10px;
    min-height: 180px;
    max-height: 500px;
    width: 300px;
    background-color: #f9f9f9;
    border-radius: 5px;
    overflow: auto;
}
.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #dcdcdc;
}
</style>